<template id="uniappCom_tp">
    <div>

        <div class="uniappwrap">
            <div class="tops">
                <div style="margin-left: 30px; line-height: 200px;color: white;">uniapp页面开发流程梳理</div>
                <img src="./assets/img/Uniapp.png" width="400" alt="" class="bg">
                <img src="./assets/img/Uniapp.png" width="100" alt="">
            </div>
            <div v-for="v in datas">
                <div class="publictitle">
                    {{v.name}}
                </div>
                <div class="publiccontrap">{{v.cont}}</div>
            </div>
        </div>

    </div>
</template>

<script>
    /*export default*/
    window.uniappCom_tp = {
        template: '#uniappCom_tp',
        data() {
            return {
                datas: [
                    {
                        name: 'uniapp脚手架項目創建的步驟在這個地方就直接省略掉了，從頁面創建開始去進行梳理', cont: `
uniapp相当于是一个容器，在这个容器里面放置的是vue的技术栈，并且可以在vue技术栈里面，调用小程序的相关方法，需要注意的是小程序的wx替换成了uni
//
创建好vue文件就可以在pages.json里面配置对应的vue文件目录路径，就可以进行相应的开发，不过mounted要换成和小程序一样的onLoad去开发，大部分的语法都是和vue相同
//
uniapp它只能使用指定的ui框架去进行开发，不然整个开发过程会有一定的兼容问题，有些组件的引入也必须要考虑到和小程序本身的组件使用兼容问题
//
像上面那种情况，为了避免，就只能在这个项目之外，多开个测试组件的项目，来进行一些没有使用过的组件的兼容性验证问题
                        `
                    }
                ]
            }
        }
    }
</script>

<style>
    .uniappwrap .tops {
        position: relative;
        height: 200px;
        background-color: #0a6b6f;
        overflow: hidden;
    }

    .uniappwrap .tops img {
        position: absolute;
        right: 30px;
        top: 50px
    }

    .uniappwrap .tops .bg {
        opacity: .3;
        top: -100px
    }
</style>